import { useState } from "react";
import ToDoListAdd from "./ToDoListAdd";
import ToDoListItem from "./ToDoListItem";
import ToDoListFilter from "./ToDoListFilter";

export default function ToDoList() {
  const [items, setItems] = useState([]);

  const addTodo = (str) => {
    const item = {
      id: Date.now(),
      text: str,
      status: false,
    };
    setItems([...items, item]);
  };

  const delTodo = (id) => {
    setItems(items.filter((item) => item.id !== id));
  };

  const [filter, setFilter] = useState("all");

  const updateStatus = (id) => {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          item.status = !item.status;
        }
        return item;
      })
    );
  };

  const getFilter = () => {
    switch (filter) {
      case "active":
        return items.filter((item) => !item.status);
      case "completed":
        return items.filter((item) => item.status);
      default:
        return items;
    }
  };

  return (
    <>
      <h2>ToDo List</h2>
      <ToDoListAdd addTodo={addTodo} />
      <ToDoListItem
        todolist={getFilter()}
        delTodo={delTodo}
        updateStatus={updateStatus}
      />
      <ToDoListFilter setFilter={setFilter} />
    </>
  );
}
